import React, { Component } from 'react'
import {
  View,
  StyleSheet
} from 'react-native'

import { connect } from 'react-redux'

import RzLoading from '../../components/common/rzLoading'
import Button from '../../components/common/button'

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    backgroundColor: 'transparent',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 64
  }
})

class Animate extends Component {
  constructor (props) {
    super(props)
    this.displayName = 'Animate'

    this.startAnimation = this.startAnimation.bind(this)
    this.stopAnimation = this.stopAnimation.bind(this)
  }

  componentWillReceiveProps (nextProps) {
    const thisNav = this.props.nav
    const thisNavIndex = thisNav.index
    const nextNav = nextProps.nav
    const nextNavIndex = nextNav.index
    console.log('===Animate  route==', thisNav, nextNav, thisNavIndex)
    console.log('==Animate=1=', thisNav.routes[thisNavIndex].routeName)
    console.log('==Animate=2=', nextNav.routes[nextNavIndex].routeName)
  }

  // componentWillMount () {
  //   const { params } = this.props.navigation.state
  //   console.log('==params==', params)
  //   console.log('===Animate==22==')
  // }

  // componentDidMount () {
  //   console.log('===Animate==33==', this.props.state)
  //   // this.startAnimation()
  // }

  startAnimation () {
    this.loading.startAnimation()
  }

  stopAnimation () {
    this.loading.stopAnimation()
  }

  render () {
    return (
      <View style={styles.container}>
        <Button
          onPress={this.stopAnimation}
          buttonTitle={'停止动画'}
        />
        <Button
          onPress={this.startAnimation}
          buttonTitle={'开启动画'}
        />
        <RzLoading ref={(ref) => { this.loading = ref }} />
      </View>
    )
  }
}

Animate.propTypes = {
}

Animate.navigationOptions = {
  headerTitle: 'Animate'
}

function mapStateToProps (state) {
  const { nav } = state
  return {
    nav,
    state
  }
}

function mapDispatchToProps (dispatch) {
  return {
    dispatch
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Animate)
